<template>
	<view :style="colorStyle">
		<view style="background-color: #fff;border-radius: 14rpx;margin: 30rpx 26rpx;padding: 20rpx 38rpx;">
			
			<view style="display: flex;justify-content: space-between;text-align: center;">
				<view>
					<view style="margin-bottom: 20rpx;color: #E93323;font-weight: 500;font-size: 36rpx;">{{ListCount.brokeragePrice || "0.00"}}</view>
					<view style="font-weight: 500;font-size: 32rpx;color: #686868;">可用积分</view>
				</view>
				<view>
					<navigator url="/pages/users/user_payment/index" hover-class="none" style="background: #E93323;border-radius: 16rpx;padding: 10rpx 24rpx;font-weight: 500;font-size: 28rpx;
					color: #FFFFFF;">
						{{$t(`立即充值`)}}
					</navigator>
				</view>
			</view>
			<view style="display: flex;text-align: center;margin-top: 36rpx;">
				<view style="flex: 1;">
					<view style="margin-bottom: 20rpx;color: #E93323;font-weight: 500;font-size: 36rpx;">{{ListCount.commissionSum|| "0.00"}}</view>
					<view style="font-weight: 500;font-size: 32rpx;color: #686868;">累计收入</view>
				</view>
				<view style="flex: 4;">
					<view style="margin-bottom: 20rpx;color: #E93323;font-weight: 500;font-size: 36rpx;">{{ListCount.commissionRefund|| "0.00"}}</view>
					<view style="font-weight: 500;font-size: 32rpx;color: #686868;">累计消费</view>
				</view>
			</view>
			
		</view>
		<view style="background-color: #fff;border-radius: 14rpx;margin: 30rpx 26rpx;padding: 24rpx 26rpx;">
			
			<view style="display: flex;justify-content: space-between;flex-flow: wrap;text-align: center;">
				<view style="width: 23%;margin-bottom: 48rpx;" v-for="(item,index) in list" :key="index" @click="toreward(item)">
					<view><image :src="item.icon" style="border-radius: 50%;width: 50rpx;height: 50rpx;"></image></view>
					<view style="font-size: 24rpx;">{{item.lable}}</view>
				</view>
			</view>
			
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getSpreadInfo
	} from '@/api/user.js';
	import home from '@/components/home';
	export default {
		components: {
			home
		},
		data() {
			return {
				list:[
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/8930cbba4ee65cf84db025e1b5f2aac3.png',
					lable:'直推奖励',
					size:1
					},{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/8f436429b689a7a6a54b31d95df2e8ab.png',
					lable:'见点奖励',
					size:2
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/747fccad0cea74065b4aabd6165fc85d.png',
					lable:'平级奖励',
					size:3
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/acb26e2d8907cd973b1fa28838210bf3.png',
					lable:'股东奖励',
					size:4
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/edb2b7d44cbde2ef74e00a59e177b4a3.png',
					lable:'代理商奖励',
					size:5
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/fd41965c3b7162ecb9814d1c6499cce1.png',
					lable:'加盟奖励',
					size:6
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/41fe4d92aa9cd1f515ad7eb822375067.png',
					lable:'团队奖励',
					size:7
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/32d59118480f01f0af7f5dcb58b393d1.png',
					lable:'其他奖励',
					size:8
					},
					{
					icon:'https://www.sjln20240111.com/uploads/attach/2024/03/20240321/10d6acb67763c2c390cfbf0a4a7bd906.png',
					lable:'累计消费',
					size:9
					}],
					ListCount:{}
			}
		},
		onLoad() {
			this.getRecordListCount()
		},
		methods: {
			getRecordListCount: function() {
				let that = this;
				getSpreadInfo().then(res => {
					console.log('ListCount',res.data)
					that.ListCount=res.data
				});
			},
			toreward(item){
				console.log('lable',item.lable)
				uni.navigateTo({
					url:'/pages/users/points/reward?title='+item.lable+'&reward_type='+item.size
				})
			}
		}
	}
</script>

<style>

</style>
